<template>
  <div class="addOrEditAgreement main-content">
    <div class="title">{{ route.query.agreementId ? '编辑' : '新增' }}协议</div>
    <el-form ref="formRef" :model="form" :rules="rules" class="addOrEdit-form" label-width="166">
      <el-col :span="10">
        <el-form-item label="分类" prop="dtype">
          <el-select v-model="form.dtype" placeholder="请选择排序" clearable>
            <el-option v-for="dict in logic_dist" :key="dict.value" :label="dict.value" :value="dict.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-col>
      <el-form-item label="是否生效" prop="isActive">
        <el-radio-group v-model="form.isActive">
          <el-radio v-for="dict in logic_isactive" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="content" label="协议内容" style="margin-bottom: 20px;">
        <editor v-model="form.content" :min-height="474" />
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="AddOrEditAgreement">
import { getDist, addDist, updateDist } from '@/api/logic/dist';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { logic_dist, logic_isactive } = toRefs<any>(proxy?.useDict('logic_dist', 'logic_isactive'));

const route = useRoute();
const router = useRouter();

const formRef = ref()

// 协议表单
const form = ref({
    dtype: '',
    sort: '',
    isActive: '1',
    content: ''
})

// 协议校验规则
const rules = {
    dtype: [{ required: true, trigger: 'blur', message: '请选择协议分类' }],
    sort: [{ required: true, trigger: 'blur', message: '请输入协议排序' }],
    isActive: [{ required: true, trigger: 'blur', message: '请选择状态' }],
    content: [{ required: true, trigger: 'blur', message: '请输入协议内容' }],
}

// 获取协议详情
const getDetail = async() => {
  try {
    const res = await getDist(route.query.agreementId);
    res.data.isActive = String(res.data.isActive)
    Object.assign(form.value, res.data);
  } catch (error) {
    console.log(error);
  }
}

// 新增/编辑协议
const confirm = async () => {
  formRef.value && formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const param = {
        dtype: form.value.dtype,
        content: form.value.content,
        sort: form.value.sort,
        isActive: form.value.isActive
      }
      if (route.query.agreementId) param.id = route.query.agreementId
      try {
        route.query.agreementId ? await updateDist(param) : await addDist(param)
        proxy?.$modal.msgSuccess(route.query.agreementId ? "编辑成功" : '保存成功');
        setTimeout(() => {
          router.back()
        }, 200)
      } catch (error) {
        console.log(error);
      }
    }
  });
}
// 取消
const cancel = () => {
  router.back()
}

onMounted(() =>{
    if (route.query.agreementId) getDetail()
})
</script>
<style lang="scss" scoped>
.addOrEditAgreement {
  .title {
    font-weight: 700;
    font-size: 16px;
    color: #3D3D3D;
    margin-bottom: 32px;
  }
    .addOrEdit-form {
      .el-select.el-select--small {
        width: 480px;
      }
    }

  }
  :deep(.el-form-item.el-form-item--default) {
    margin-bottom: 32px;
  }
  :deep(.el-input__wrapper) {
    width: 480px;
  }
  :deep( .el-select.el-select--default) {
    width: 480px;
  }
  :deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
  }
  :deep(.el-input__inner) {
    width: 480px;
    height: 40px;
    line-height: 40px;
  }
  :deep(.editor) {
    width: 63.9vw !important;
  }
</style>
